<template>
  <div class="pc">
    <!-- <div class="yzw">
        <span>预置位</span>
        <el-select v-model="state.yzwv" placeholder="请选择预置位" style="width: 150px">
          <el-option v-for="(item,inx) in state.ylist" :key="inx" :label="item.label" :value="item.value" />
        </el-select>
      </div> -->
    <div class="ptzc">
      <div class="yuan"></div>
      <div class="xyuan"></div>
      <div
        class="btleft active"
        @mousedown="toptz('LEFT')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="bttop active"
        @mousedown="toptz('UP')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btright active"
        @mousedown="toptz('RIGHT')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btbottom active"
        @mousedown="toptz('DOWN')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btleftt active"
        @mousedown="toptz('LEFT_UP')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <!-- <ArrowLeft /> -->
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btleftb active"
        @mousedown="toptz('LEFT_DOWN')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <!-- <ArrowLeft /> -->
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btrightt active"
        @mousedown="toptz('RIGHT_UP')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <!-- <ArrowLeft /> -->
          <CaretLeft />
        </el-icon>
      </div>
      <div
        class="btrightb active"
        @mousedown="toptz('RIGHT_DOWN')"
        @mouseup="toptz('STOP')"
      >
        <el-icon>
          <!-- <ArrowLeft /> -->
          <CaretLeft />
        </el-icon>
      </div>
      <div class="btc active" @mousedown="toptz('STOP')">
        <el-icon>
          <RefreshRight />
        </el-icon>
      </div>
    </div>
    <div
      class="padd active"
      @mousedown="toptz('ZOOM_IN')"
      @mouseup="toptz('STOP')"
    ></div>
    <div
      class="psub active"
      @mousedown="toptz('ZOOM_OUT')"
      @mouseup="toptz('STOP')"
    ></div>
  </div>
</template>

<script setup>
const props = defineProps({
  vid: String,
});

const state = reactive({
  visible: false,
  yzwv: null,
  ylist: [],
});

watch(
  () => props.vid,
  (newVal) => {
    if (newVal) {
      //getList();
    }
  },
  { immediate: true }
);

const getList = () => {
  // useApi
  //   .post("/api/common/handlecameracontrol", {
  //     deviceId: props.vid,
  //   })
  //   .then((res) => {
  //     state.ylist = [...(res.data.eventInfoList || [])];
  //   });
};
const toptz = (cmd, yzw) => {
  if (cmd == "STOP") {
    useApi.post("/dynamicview/ar/handlecontrol", {
      action: 1,
      cameraId: props.vid,
      command: "LEFT",
    });
  } else if (cmd != "GOTO_PRESET") {
    useApi.post("/dynamicview/ar/handlecontrol", {
      action: 0,
      cameraId: props.vid,
      command: cmd,
    });
  } else {
    useApi.post("/dynamicview/ar/handlecontrol", {
      action: 0,
      cameraId: props.vid,
      command: "GOTO_PRESET",
      presetIndex: yzw,
    });
  }
};
</script>

<style lang="scss" scoped>
.el-icon {
  font-size: 40px;
  color: #ffffff;

  svg {
    width: 40px;
    height: 40px;
  }
}

.pc {
  display: flex;
  flex-direction: column;
  width: 307px;
  height: 283px;
  display: flex;
  align-items: center;
  position: relative;
  background-image: url("/images/new/ptzc.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .padd {
    position: absolute;
    cursor: pointer;
    width: 37.5px;
    height: 37.5px;
    left: 25px;
    bottom: 12px;
    background-image: url("/images/new/zout.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &:active {
      background-image: url("/images/new/activebig.png");
      background-size: 100% 100%;
    }
  }

  .psub {
    position: absolute;
    cursor: pointer;
    width: 37.5px;
    height: 37.5px;
    right: 25px;
    bottom: 12px;
    background-image: url("/images/new/zin.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &:active {
      background-image: url("/images/new/activesmall.png");
      background-size: 100% 100%;
    }
  }
}

.yzw {
  display: flex;
  justify-content: space-between;

  span {
    margin-top: 8px;
  }
}

.zoom {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}

.ptzc {
  margin-top: 10px;
  width: 140px;
  height: 140px;
  font-size: 30px;
  color: #ffffff;
  position: relative;
  transform: scale(1.5);
  margin-top: 71px;

  .yuan {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    // background: radial-gradient(circle, #0f5797, #6cb2e6);
    // box-shadow: 0 0 3px #666;
  }

  .xyuan {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    // background: radial-gradient(circle, #1e8fdb, #4ea6e6);
  }

  .btc {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #ffffff;
  }

  .btleft {
    position: absolute;
    left: 0px;
    top: 48px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  .bttop {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 40px;
    height: 40px;
    transform: rotate(90deg);
    cursor: pointer;
  }

  .btright {
    position: absolute;
    right: 0px;
    top: 52px;
    width: 40px;
    height: 40px;
    transform: rotate(180deg);
    cursor: pointer;
  }

  .btbottom {
    position: absolute;
    bottom: 0px;
    left: 50px;
    width: 40px;
    height: 40px;
    transform: rotate(270deg);
    cursor: pointer;
  }

  .btleftt {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    cursor: pointer;
  }

  .btleftb {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    transform: rotate(-45deg);
    cursor: pointer;
  }

  .btrightt {
    position: absolute;
    right: 14px;
    top: 17px;
    width: 40px;
    height: 40px;
    transform: rotate(135deg);
    cursor: pointer;
  }

  .btrightb {
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    transform: rotate(-135deg);
    cursor: pointer;
  }

  .active {
    &:active {
      .el-icon {
        color: yellow;
      }
    }
  }
}
</style>